<template>
	<view class="container">
		<!-- 顶部导航 -->
		<Navgatmy :images="imgs"></Navgatmy>

		<!-- 顶部背景图 -->
		<view class="header">
			<image class="header-bg" src="https://img.jingkakeji.com/img/static/xqs.png" mode="aspectFit"></image>
			<view class="header-overlay"></view>

			<!-- 概率总览区域 -->
			<view class="probability-overview">
				<view class="probability-scroll">
					<view v-for="(item, index) in boxData.odds_list" :key="item.level" class="probability-item">
						<view class="rarity-color" :style="{ backgroundColor: getRarityColor(item.level) }"></view>
						<view class="probability-info">
							<!-- <text class="rarity-name">{{ item.level_alias }}</text> -->
							<text class="probability-value">{{ item.odds }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 奖品展示 -->
		<view class="prize-section">
			<view class="section-header">
				<view class="section-title">
					<image style="width: 250rpx;height: 100rpx;" src="https://img.jingkakeji.com/img/static/heizbao.png" mode=""></image>
				</view>
			</view>

			<view class="prize-list">
				<view v-for="(item, index) in boxData.contains" :key="item.id" class="prize-item-wrap">
					<view class="odds">
						{{item.odds_percent}}
					</view>
					<view class="prize-item" @click="previewPrize(item)" :style="{ 
		    backgroundImage: 'url(' + item.level_image_url + ')',
		    backgroundRepeat: 'no-repeat',
				backgroundSize: 'contain', 
				backgroundPosition: 'center'
			}">
						<view class="prize-image-wrapper">
							<image class="prize-image" :src="item.skins.cover" mode="aspectFit"></image>
							<view class="prize-label">
								<text class="label-quality"
									:style="{ visibility: item.skins.dura_alias === '无' ? 'hidden' : 'visible' }">{{ item.skins.dura_alias }}</text>
								<text class="label-name">{{ item.skins.name }}</text>
							</view>
						</view>
					</view>
					<!-- 列表盒子下方的价格条（同宽、无圆角） -->
					<view class="prize-price-box">
						<text class="prize-price-text">¥{{ item.skins.bean }}</text>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 200rpx;"></view>
		</view>

		<!-- 开箱操作栏 -->
		<view class="action-bar">
			<view class="price-display">

			</view>

			<view class="multi-open">
				<view class="count-selector">
					<view v-for="count in [1,2,3]" :key="count" class="count-box" @click="selectCount(count)"
						:disabled="isOpening" :style="{ 
              backgroundImage: `url(${openCount === count ? selectedBg : unselectedBg})`,
              backgroundSize: '100% 100%',
              backgroundRepeat: 'no-repeat'
            }">
						<text class="count-text">x{{ count }}</text>
					</view>
				</view>
				<!-- <text class="total-price">{{ (boxData.bean * openCount).toFixed(2) }}</text> -->
			</view>

			<button class="open-btn" @click="openBox" :disabled="isOpening || !canOpenBox">
				{{ isOpening ? '开箱中...' : `${(boxData.bean * openCount).toFixed(2)}开箱` }}
			</button>
		</view>

		<!-- 开箱动画弹窗 -->
		<uni-popup ref="openingPopup" type="center" :mask-click="false">
			<view class="opening-popup">
				<!-- <view class="xiantiaos"></view> -->
				<view class="open_jg">

				</view>
				<view class="square-container">
					<open-several-box ref="severalBox" :list="animationItemsList" :result="currentAnimationResult"
						:rowLength="openCount"
						:stopOffsetPercent="openCount > 1 ? (openCount === 2 || openCount === 3 ? 280 : 280) : 280"
						startMusic="https://img.jingkakeji.com/img/static/audio/open8.mp3" endMusic="https://img.jingkakeji.com/img/static/audio/14131.mp3"
						@finsh="onAnimationFinish" class="box-animation">
						<template v-slot="{ item }">
							<view class="prize-item-square" :style="{ 
									backgroundImage: 'url(' + item.level_image_url + ')', 
									margin: (openCount === 2 || openCount === 3) ? '53rpx' : '' 
								}">
								<image :src="item.cover" class="prize-image-square" mode="aspectFill"></image>
							</view>
						</template>
					</open-several-box>
				</view>
			</view>
		</uni-popup>

		<!-- 结果弹窗（新样式） -->
		<uni-popup ref="resultPopup" type="center">
			<view class="xq-result-popup" v-if="openedPrizes.length > 0">
				<!-- 标题栏 -->
				<view class="xq-result-header" :style="{ 
						backgroundImage: resultHeaderBg ? 'url(' + resultHeaderBg + ')' : '', 
						top: resultHeaderTop + 'rpx' 
					}">
					<view class="xq-result-header-title">
						<image src="https://img.jingkakeji.com/img/static/xiangqings/shipin.png" style="width: 192rpx;height: 52rpx;" mode=""></image>
					</view>
					<view class="xq-result-close" @click="closeResultPopup">
						<text class="xq-result-close-text">×</text>
					</view>
				</view>

				<!-- 结果网格（最多展示4个） -->
				<view class="xq-result-body"
					:style="{ backgroundImage: resultBodyBg ? 'url(' + resultBodyBg + ')' : '' }">
					<view class="xq-result-grid"
						:class="{ 'len-1': openedPrizes.length === 1, 'len-3': openedPrizes.length === 3 }">
						<view class="xq-result-card" v-for="(item, index) in openedPrizes.slice(0, 4)" :key="index">
							<view class="xq-card-content"
								:style="{ backgroundImage: 'url(' + item.level_image_url + ')' }">
								<image :src="item.cover || (item.skins && item.skins.cover)" class="xq-card-image"
									mode="aspectFit"></image>
								<view class="xq-card-info">
									<text class="xq-card-quality"
										:style="{ visibility: ((item.duraAlias || (item.skins && item.skins.dura_alias)) === '无') ? 'hidden' : 'visible' }">
										{{ item.duraAlias || (item.skins && item.skins.dura_alias) }}
									</text>
									<text class="xq-card-name">{{ item.name || (item.skins && item.skins.name) }}</text>

								</view>
							</view>
							<view class="xq-card-value">
								<text class="xq-card-price">{{ item.bean || (item.skins && item.skins.bean) }}</text>
								<text class="xq-coin">💰</text>
							</view>
						</view>
					</view>

					<!-- 底部操作按钮 -->
					<view class="xq-result-actions">
						<view class="xq-action-btn xq-continue" @click="onContinueOpen">继续开箱</view>
						<view class="xq-action-btn xq-disassemble" @click="onDisassembleAll">全部分解</view>
					</view>
				</view>

				<!-- 底部操作按钮 -->

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getBoxDetail,
		getBoxOpen,
		getRecycled,
		getUsetInof
	} from "../../../api/outOfTheFree/index.js";
	import Navgatmy from "../../../Component/navgatsmy/navgatsmy.vue";
	import {
		playSound
	} from "../../../utils/soundSettings.js";
	export default {
		components: {
			Navgatmy
		},
		data() {
			return {
				imgs: "https://img.jingkakeji.com/img/static/mangboxs.png",
				openCount: 1,
				selectedBg: "https://img.jingkakeji.com/img/static/xiangqings/aapushstwo.png",
				unselectedBg: "https://img.jingkakeji.com/img/static/xiangqings/aapushtwo.png",

				currentResultIndex: 0,
				openedPrizes: [],
				userBalance: 500.00,
				isOpening: false,
				currentOpenIndex: 0,
				animationItemsList: [],
				currentAnimationResult: [],
				boxData: {},
				skinList: [],
				listsids: [],
				// 结果弹窗标题背景图（可替换）
				resultHeaderBg: "https://img.jingkakeji.com/img/static/xiangqings/bt.png",
				// 主体背景图（包裹网格+按钮）
				resultBodyBg: "https://img.jingkakeji.com/img/static/xiangqings/tk.png",
				// 标题容器下移量（仅移动标题，不影响主体）
				resultHeaderTop: 40
			};
		},
		computed: {
			currentPrize() {
				return this.openedPrizes[this.currentResultIndex] || {};
			},
			canOpenBox() {
				const totalCost = parseFloat(this.boxData.bean || 0) * this.openCount;
				return this.userBalance >= totalCost;
			},
			totalValue() {
				return this.openedPrizes.reduce((sum, prize) => {
					return sum + parseFloat(prize.bean || 0);
				}, 0);
			}
		},
		onLoad(options) {
			let token = uni.getStorageSync("token")
			if (token) {
				this.getUsetInofs()
			}
			if (options.id) {
				this.getBoxDetails(options.id);
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				});
			}
		},
		methods: {
			onContinueOpen() {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				// 关闭当前弹窗，保留页面可继续操作
				this.$refs.resultPopup.close();
			},

			onDisassembleAll() {
				const prizeIds = this.listsids.map(prize => prize.id);
				if (prizeIds.length > 0) {
					this.getRecycleds(prizeIds);
				}
				playSound("https://img.jingkakeji.com/img/static/music/succeed_money.mp3")
			},
			onchous() {
				uni.navigateTo({
					url: "/pages/index/choujiang/choujiang"
				})
			},
			async getUsetInofs() {
				let res = await getUsetInof()
				console.log(res)
				this.userBalance = res.data.integral
			},
			async getRecycleds(numbers) {
				try {
					const res = await getRecycled({
						data: numbers
					});
					uni.showToast({
						title: '分解成功',
						icon: 'success'
					});
					this.$refs.resultPopup.close();
					this.userBalance = (parseFloat(this.userBalance) + this.totalValue).toFixed(2);
				} catch (error) {
					console.error('分解失败:', error);
					uni.showToast({
						title: '分解失败，请重试',
						icon: 'none'
					});
				}
			},

			convertToSkinFormat(data) {
				return {
					id: data.id,
					name: data.name,
					cover: data.cover,
					imageUrl: data.cover,
					dura: data.dura,
					bean: data.bean,
					duraAlias: data.dura_alias
				};
			},

			async getBoxDetails(id) {
				try {
					const res = await getBoxDetail(id);
					this.boxData = res.data || {};
					this.skinList = this.boxData.contains?.map(item => ({
						...item.skins,
						level: item.level,
						level_image_url: item.level_image_url
					})) || [];

					this.animationItemsList = this.skinList.map(item => ({
						...item,
						probability: item.odds_percent ? parseFloat(item.odds_percent) : 1,
						level_image_url: item.level_image_url
					}));
				} catch (error) {
					console.error('获取盲盒详情失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				}
			},

			getLevelAlias(level) {
				const levelItem = this.boxData.odds_list?.find(item => item.level === level);
				return levelItem ? levelItem.level_alias : '';
			},

			getRarityColor(level) {
				const colorMap = {
					1: '#ffd700',
					2: '#ff4500',
					3: '#9370db',
					4: '#1e90ff',
					5: '#a9a9a9'
				};
				return colorMap[level] || '#fff';
			},

			selectCount(count) {
				if (!this.isOpening) {
					this.openCount = count;
				}
			},

			async openBoxAction() {
				try {
					const data = {
						id: this.boxData.id,
						num: this.openCount
					};
					const res = await getBoxOpen(data);
					console.log('开箱结果:', res.data);
					this.listsids = res.data
					this.openedPrizes = [];
					for (let i = 0; i < res.data.length; i++) {
						const targetId = res.data[i].bean;
						const sameIdItems = this.findItemsWithSameId(this.boxData.contains || [], targetId);

						if (sameIdItems.length > 0) {
							const prize = {
								...sameIdItems[0].skins,
								lv: sameIdItems[0].level,
								lvAlias: this.getLevelAlias(sameIdItems[0].level),
								level_image_url: sameIdItems[0].level_image_url,
								duraAlias: sameIdItems[0].skins.dura_alias
							};
							this.openedPrizes.push(prize);
						}
					}

					this.currentAnimationResult = this.openedPrizes.map(prize => prize.id);
					return true;
				} catch (error) {
					console.error('开箱失败:', error);
					uni.showToast({
						title: '开箱失败，请重试',
						icon: 'none'
					});
					return false;
				}
			},

			findItemsWithSameId(targetArray, targetId) {
				return targetArray.filter(item => {
					return item.skins.bean == targetId;
				});
			},

			async openBox() {
				playSound('https://img.jingkakeji.com/img/static/music/click.mp3')
				const totalCost = parseFloat(this.boxData.bean || 0) * this.openCount;

				if (this.userBalance < totalCost) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					});
					return;
				}

				this.isOpening = true;
				uni.showLoading({
					title: '准备开箱...'
				});

				try {
					this.getUsetInofs()
					this.openedPrizes = [];
					this.currentResultIndex = 0;
					this.currentOpenIndex = 0;
					const success = await this.openBoxAction();
					if (success) {
						this.userBalance = (this.userBalance - totalCost).toFixed(2);
						setTimeout(() => {
							uni.hideLoading();
							this.$refs.openingPopup.open();
							playSound("https://img.jingkakeji.com/img/static/music/open.mp3")
							setTimeout(() => {
								this.$refs.severalBox.start();
							}, 300);
						}, 500);
					} else {
						uni.hideLoading();
						this.isOpening = false;
					}
				} catch (error) {
					// 确保在异常情况下也隐藏loading
					uni.hideLoading();
					this.isOpening = false;
					console.error('开箱过程中发生错误:', error);
					uni.showToast({
						title: '开箱失败，请重试',
						icon: 'none'
					});
				}
			},

			onAnimationFinish() {
				playSound("https://img.jingkakeji.com/img/static/music/succeed.mp3")
				setTimeout(() => {
					this.$refs.openingPopup.close();
					this.$refs.resultPopup.open();
					this.currentOpenIndex = 0;
					this.currentResultIndex = 0;
					this.isOpening = false;
				}, 500);
			},

			closeResultPopup() {
				if (this.currentResultIndex < this.openedPrizes.length - 1) {
					this.currentResultIndex++;
				} else {
					this.$refs.resultPopup.close();
				}
			},

			recycleAll() {
				console.log(this.listsids, "中奖饰品的id")
				const prizeIds = this.listsids.map(prize => prize.id);
				if (prizeIds.length > 0) {
					this.getRecycleds(prizeIds);
				}
			},

			previewPrize(item) {
				// uni.previewImage({
				//   urls: [item.skins.cover],
				//   current: 0
				// });
			},

			onResultChange(e) {
				this.currentResultIndex = e.detail.current;
			},

			goToInventory() {
				this.closeResultPopup();
				uni.navigateTo({
					url: "/pages/beibao/beibao"
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 新增浮动动画
	@keyframes float {
		0% {
			transform: translateY(-10rpx);
		}

		50% {
			transform: translateY(10rpx);
		}

		100% {
			transform: translateY(-10rpx);
		}
	}

	.container {
		padding-bottom: 200rpx;
		background: url("https://img.jingkakeji.com/img/static/yonghusdf.png");
		background-repeat: no-repeat;
		background-size: 750rpx 1948rpx;
		background-attachment: fixed;
	}

	.header {
		position: relative;
		width: 100%;
		height: 906rpx;
		overflow: visible;
		background: url("https://img.jingkakeji.com/img/static/xiangqings/bxiangqing.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;

		.header-bg {
			width: 416rpx;
			height: 284rpx;
			position: absolute;
			top: 242rpx;
			/* 仅移动图片，不影响背景布局 */
			left: 168rpx;
			transform: translateX(-50%);
			display: block;
			object-fit: contain;
			// 应用浮动动画
			animation: float 3s ease-in-out infinite;
		}

		.header-overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.probability-overview {
			position: absolute;
			bottom: 0;
			top: 848rpx;
			left: 0;
			right: 0;
			padding: 0 30rpx;
			z-index: 10;

			.probability-scroll {
				display: flex;
				gap: 0;
				/* 无间隔 */
				padding: 10rpx 0;
				width: 100%;
				justify-content: center;
				/* 居中排列 */
				overflow: visible;
				/* 不滚动 */
				flex-wrap: nowrap;
				/* 横向一行 */
			}

			.probability-item {
				flex: 0 0 auto;
				/* 不拉伸，按内容宽度 */
				min-width: 140rpx;
				/* 再变窄，进一步靠近 */
				padding: 8rpx;
				/* 再收紧内边距 */
				position: relative;
				/* 为重叠提供定位上下文 */
				border-radius: 8rpx;
				background-image: url("https://img.jingkakeji.com/img/static/xiangqings/kaobei.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				// text-align: center;
				gap: 10rpx;

				.rarity-color {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					flex-shrink: 0;
					margin-left: 22rpx;
				}

				.probability-info {
					flex-grow: 1;
					line-height: 50rpx;

					.rarity-name {
						font-size: 24rpx;
						color: #fff;
						display: block;
						margin-bottom: 5rpx;
					}

					.probability-value {
						font-size: 22rpx;
						color: #ffffff;
						font-weight: bold;
						// line-height: 20rpx;
					}
				}
			}

			/* 让相邻盒子产生部分重叠效果，仅作用于后续项 */
			.probability-item+.probability-item {
				margin-left: -12rpx;
				/* 负外边距实现轻微重叠 */
			}
		}
	}

	.prize-section {
		padding: 20rpx;

		.section-header {
			display: flex;
			justify-content: center;
			/* 居中内容 */
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
				/* 让内部图片在父级中居中 */
				width: 100%;
				margin-top: 32rpx;
			}

			.section-actions {
				display: flex;
				gap: 15rpx;

				.action-btn {
					padding: 8rpx 16rpx;
					background-color: rgba(255, 255, 255, 0.1);
					border-radius: 8rpx;
					font-size: 26rpx;

					&:active {
						background-color: rgba(255, 255, 255, 0.2);
					}
				}
			}
		}

		.prize-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(220rpx, 1fr));
			gap: 15rpx;
			margin-top: 26rpx;
			padding: 10rpx;

			.prize-item-wrap {
				display: flex;
				flex-direction: column;
				gap: 0;
				position: relative;

				.odds {
					position: absolute;
					top: 0;
					left: 0;
					color: white;
					font-size: 24rpx;
				}
			}

			.prize-item {
				border-radius: 12rpx;
				padding: 15rpx;
				// text-align: center;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				gap: 8rpx;
				width: 216rpx;
				height: 206rpx;

				.prize-image-wrapper {
					position: relative;
					width: 100%;
					height: 88rpx;

				}

				.prize-image {
					width: 154rpx;
					height: 108rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					margin-left: 10rpx;
				}

				.prize-label {
					position: absolute;
					left: 10rpx;
					top: 100rpx;
					// width: 154rpx;
					// right: 0;
					// bottom: 0;
					// display: flex;
					// flex-direction: column;
					// align-items: center;
					// justify-content: flex-end;
					// padding: 6rpx 8rpx;
					// background: transparent; /* 去掉阴影/渐变遮罩 */
				}

				.label-quality {
					font-size: 24rpx;
					color: #fff;
					opacity: 0.95;
				}

				.label-name {
					width: 154rpx;
					/* 固定宽度，和图片等宽 */
					display: block;
					/* 需要块或行内块以生效省略号 */
					white-space: nowrap;
					/* 单行显示 */
					overflow: hidden;
					/* 超出隐藏 */
					text-overflow: ellipsis;
					/* 超出省略号 */
					font-size: 24rpx;
					color: #FBDC3B;
					font-weight: bold;
				}

				.prize-name {
					font-size: 24rpx;
					display: block;
					margin-bottom: 5rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 5rpx;
				}

				.prize-rarity {
					font-size: 22rpx;
					display: block;
					margin-bottom: 5rpx;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.prize-probability {
					font-size: 20rpx;
					color: #999;
					display: block;
				}

			}

			/* 新增价格条样式（与卡片同宽、无圆角） */
			.prize-price-box {
				background-color: #7463DB;
				border-radius: 0;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				// margin-top: -15rpx;
			}

			.prize-price-text {
				color: #FBDC3B;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}

	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background: url("https://img.jingkakeji.com/img/static/bar.png");
		background-repeat: no-repeat;
		background-size: cover;

		.price-display {
			margin-top: 40rpx;
			margin-bottom: 20rpx;

			.current-price {
				font-size: 36rpx;
				color: #f0c14b;
				font-weight: bold;
			}

			.balance {
				font-size: 24rpx;
				color: #999;
				margin-left: 20rpx;
			}
		}

		.multi-open {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			gap: 15rpx;

			.count-selector {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				gap: 10rpx;
				padding: 0 20rpx;
			}

			.count-box {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 8rpx;
				cursor: pointer;
				position: relative;
				/* 关键优化：禁用点击反馈和动画 */
				-webkit-tap-highlight-color: transparent;
				tap-highlight-color: transparent;
				user-select: none;
				transition: none !important;
				transform: none !important;

				&:disabled {
					opacity: 0.6;
					pointer-events: none;
				}

				/* 移除点击时的默认效果 */
				&:active {
					transform: none !important;
					scale: 1 !important;
				}
			}

			.count-text {
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
				z-index: 1;
			}

			.total-price {
				font-size: 28rpx;
				color: #f0c14b;
				margin-left: auto;
			}
		}

		.open-btn {
			background: url("https://img.jingkakeji.com/img/static/comegame.png");
			background-size: 100% 1;
			background-repeat: no-repeat;
			background-position: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			margin: 0;
			border: none;

			&:after {
				border: none;
			}

			&:active {
				opacity: 0.9;
			}

			&:disabled {
				background: #999;
				color: #666;
				opacity: 0.8;
			}
		}
	}

	.result-popup {
		background-color: #7463DB;
		border-radius: 20rpx;
		width: 80vw;
		overflow: hidden;

		.result-swiper {
			height: 300rpx;

			.result-image {
				width: 100%;
				height: 100%;
			}
		}

		.result-info {
			margin: 30rpx;
			text-align: center;

			.result-name {
				font-size: 32rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 10rpx;
			}

			.result-rarity {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.result-total-value {
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #f0c14b;
		}

		.result-progress {
			display: flex;
			align-items: center;
			gap: 15rpx;
			margin: 0 30rpx 30rpx;

			text {
				font-size: 24rpx;
				color: #999;
			}

			.progress-bar {
				flex: 1;
				height: 6rpx;
				background-color: #333;
				border-radius: 3rpx;

				.progress-fill {
					height: 100%;
					background: linear-gradient(to right, #f0c14b, #f2a900);
					border-radius: 3rpx;
					transition: width 0.3s;
				}
			}
		}

		.result-actions {
			display: flex;
			gap: 20rpx;
			padding: 0 30rpx 30rpx;

			.result-btn {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				background-color: rgba(255, 255, 255, 0.1);
				color: #fff;
				border: none;
				border-radius: 8rpx;

				&:after {
					border: none;
				}

				&.primary {
					background: linear-gradient(to right, #f0c14b, #f2a900);
					color: #1a1a1a;
				}

				&:active {
					opacity: 0.9;
				}
			}
		}
	}

	/* 新结果弹窗样式 */
	.xq-result-popup {
		width: 95vw;
		border-radius: 20rpx;
		overflow: hidden;
		background: transparent;
		/* 去掉弹窗盒子的背景色 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 主体容器（含网格与按钮） */
	.xq-result-body {
		width: 95vw;
		/* 固定宽度 */
		height: 700rpx;
		/* 固定高度 */
		padding: 0;
		/* 去掉内边距，让内容自适应 */
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		/* 网格和按钮分别占上下空间 */
	}


	.xq-result-header {
		width: 462.14rpx;
		height: 126.29rpx;
		background: transparent;
		padding: 0;
		/* 顶部无内边距，紧凑拼接 */
		display: flex;
		justify-content: center;
		/* 居中标题 */
		align-items: center;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		// top: 20rpx;
		// position: relative;
	}

	.xq-result-header-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		/* 文本居中，后续替换为图片依然居中 */
	}

	.xq-result-close {
		width: 40rpx;
		height: 40rpx;
		// background: rgba(255,255,255,0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: -100rpx;
		// bottom: -20rpx;
	}

	.xq-result-close-text {
		font-size: 60rpx;
		color: #fff;
	}

	.xq-result-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 20rpx;
		background: transparent;
		/* 去掉内容区背景 */
		flex: 1;
		/* 占据剩余空间 */
		align-items: center;
		/* 垂直居中 */
		justify-items: center;
		/* 水平居中 */
	}

	/* 仅一个结果：单列居中展示 */
	.xq-result-grid.len-1 {
		/* 单个结果时采用与三个结果一致的三列布局与间距 */
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		gap: 12rpx;
	}

	.xq-result-grid.len-1 .xq-result-card {
		/* 放置在中间列 */
		grid-column: 2 / span 1;
	}

	/* 三个结果：三列居中并缩小间距 */
	.xq-result-grid.len-3 {
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		gap: 12rpx;
	}

	.xq-result-card {
		// background: linear-gradient(135deg, #6b46a3 0%, #8b5cf6 100%);
		border-radius: 12rpx;
		padding: 15rpx;
		// border: 2rpx solid #a855f7;
		width: 186rpx;
		height: 226rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.xq-card-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		// text-align: center;
		width: 186rpx;
		height: 226rpx;

		box-sizing: border-box;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.xq-card-image {
		width: 140rpx;
		height: 96rpx;
		margin-bottom: 10rpx;
		border-radius: 8rpx;
	}

	.xq-card-info {
		width: 100%;
	}

	.xq-card-quality {
		display: block;
		font-size: 20rpx;
		color: #e5e7eb;
		margin-bottom: 5rpx;
		text-align: left;
		/* 左对齐 */
		padding-left: 10rpx;
		/* 稍微往右一点，不贴最左 */
	}

	.xq-card-name {
		display: block;
		font-size: 22rpx;
		color: #fff;
		font-weight: bold;
		margin-bottom: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 174rpx;
	}

	.xq-card-value {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5rpx;
		background-color: #7463DB;
		width: 186rpx;
		height: 48rpx;
		box-sizing: border-box;
	}

	.xq-card-price {
		font-size: 20rpx;
		color: #fbbf24;
		font-weight: bold;
	}

	.xq-coin {
		font-size: 16rpx;
	}

	.xq-result-actions {
		width: 80%;
		height: 120rpx;
		display: flex;
		gap: 20rpx;
		padding: 20rpx;
		background: transparent;
		/* 去掉底部背景 */
		flex-shrink: 0;
		/* 不压缩按钮区域 */
	}

	.xq-action-btn {
		flex: 1;
		height: 70rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
	}

	.xq-continue {
		background: url("https://img.jingkakeji.com/img/static/xiangqings/jixubtn.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.xq-disassemble {
		background: url("https://img.jingkakeji.com/img/static/xiangqings/fenjiebtn.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.opening-popup {
		height: 95vh;
		width: 100vw;
		background: url("https://img.jingkakeji.com/img/static/xiangqings/beijing.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		max-width: 100vw;
		max-height: 100vh;
		position: relative;
		// z-index: 9990;
		margin-top: 100rpx;
	}

	.open_jg {
		position: absolute;
		width: 100%;
		height: 300rpx;
		top: 36vh;
		background: url("https://img.jingkakeji.com/img/static/xiangqings/jiguang.png");
		z-index: 99999;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.square-container {
		width: 100vw;
		height: 80vh;
		/* 进一步减少高度，为底座留空间 */
		position: relative;
		overflow: hidden;
		/* 隐藏超出部分 */
		display: flex;
		align-items: flex-start;
		/* 改为顶部对齐 */
		justify-content: center;
		margin-bottom: 140rpx;
	}

	.box-animation {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		/* 改为顶部对齐 */
		padding-top: 0;
		/* 移除顶部内边距 */
		margin-top: 0;
		/* 移除额外移动，让动画自然停止在中奖线 */
	}

	.prize-item-square {
		width: 232rpx;
		height: 199.2rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		// padding-top: 0;
		// padding: 10rpx 50rpx; /* 上下间距缩小，左右保持 */
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		// margin: 53rpx;
		// margin-top: -40rpx; 
	}

	.prize-image-square {
		width: 150rpx;
		height: 150rpx;
		object-fit: contain;
	}

	:deep(.box-animation) {
		&[row-length="1"] .prize-image-square {
			width: 250rpx;
			height: 250rpx;
		}
	}

	@media (min-width: 768px) {
		.square-container {
			width: 60vw;
			padding-bottom: 60vw;
		}
	}

	.opening-count {
		margin-bottom: 20rpx;
		padding: 8rpx 16rpx;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;

		text {
			font-size: 28rpx;
			color: #f0c14b;
		}
	}

	.line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>